<!--
 * @Author: jhw
 * @Date: 2025-08-07 00:11:56
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-08 11:40:01
 * @Description:
-->
<template>
  <div class="right-side-container">
    <div v-if="currentComponentIndex === -1" class="content">点击画布组件进行编辑</div>
    <div v-else>
      <EditPannel :current-material-com="currentMaterialCom" />
    </div>
  </div>
</template>

<script setup lang="ts">
import EditPannel from '@/components/SurveyComs/EditItems/EditPannel.vue';
import { useEditorStore } from '@/stores/useEditor';
import { computed } from 'vue';

const editorStore = useEditorStore();

const currentComponentIndex = computed(() => editorStore.currentComponentIndex);
const currentMaterialCom = computed(() => editorStore.coms[currentComponentIndex.value]);
</script>

<style scoped lang="scss">
.right-side-container {
  @apply w-320px fixed right-20px top-70px overflow-y-scroll;
  height: calc(100vh - 50px - 40px);
  background-color: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
}
.content {
  @apply h-full flex justify-center items-center;
}
</style>
